<template>
  <el-row class="container">
    <headers v-bind:activeIndex="activeIndex"></headers>
    <el-col :span="24" class="main">
      <el-col :span="24" class="breadcrumb-container">
        <!-- 导航栏菜单开始 -->
        <el-col :span="24" class="main1">
          <aside>
            <el-menu
              class="el-menu-vertical-demo el-menu1"
              @open="handleopen"
              @close="handleclose"
              unique-opened
              router
            >
              <template v-for="(item,index) in $router.options.routes" v-if="item.menu4" >
                <el-submenu :index="index+''" v-if="!item.leaf" :key="index">
                  <template slot="title">
                    <i :class="item.iconCls"></i>
                    {{item.name}}
                  </template>
                  <el-menu-item
                    v-for="child in item.children"
                    :index="child.path"
                    :key="child.path"
                    v-if="!child.hidden"
                  >{{child.name}}</el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-if="item.leaf&&item.children.length>0"
                  :index="item.children[0].path"
                  :key="index"
                >
                  <i :class="item.iconCls"></i>
                  {{item.children[0].name}}
                </el-menu-item>
              </template>
            </el-menu>
          </aside>
          <section class="content-container">
            <div class="h-w-100">
              <el-col :span="24" class="content-wrapper h-w-100">
                <el-tooltip
                  v-bind:class="{none:controlShow===false}"
                  class="item"
                  effect="dark"
                  content="关闭"
                  placement="bottom"
                >
                  <i class="el-icon-circle-close close" style="z-index:10001" @click="showCont"></i>
                </el-tooltip>

                <transition name="fade" mode="out-in">
                  <router-view></router-view>
                </transition>
              </el-col>
            </div>
          </section>
        </el-col>
        <!-- 导航栏菜单结束 -->
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import headers from "../../component/header.vue";
export default {
  components: {
    headers
  },
  data() {
    return {
      sysName: "生态修复绩效评价系统",
      name: "admin",
      sysUserName: "",
      sysUserAvatar: "",
      listmenu: "北京地铁",
      controlShow: false,
      project: "",
      activeIndex: "3"
    };
  },
  mounted() {
    //  this.loginModel.checkInfo('bob',1).then(res => {
    //    console.log(res);
    //  }).catch(err => {
    //    console.log(err.message)
    //  })
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleopen() {
      //console.log('handleopen');
    },
    handleclose() {
      //console.log('handleclose');
    },
    showCont() {
      this.controlShow = !this.controlShow;
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background-color: #475669;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }

    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #ffffff;
      }
    }
    .logo-width {
      width: 400px;
    }
    .logo-collapse-width {
      width: 60px;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    z-index: 10;
    aside {
      width: 180px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      width: 120px;
    }
    .content-container {
      flex: 1;
      overflow-y: hidden;
      padding: 0px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        box-sizing: border-box;
      }
    }
  }
}
</style>
<style>
.el-menu {
  background-color: #475669;
}
.el-submenu .el-menu {
  background-color: #475669;
}
.el-menu1 {
  border-right: 2px solid #dfdbdb;
}
.l-menu .el-menu-item {
  color: #ffffff;
}
.el-menu-item,
.el-submenu__title {
  color: #ffffff;
}
.el-submenu .el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #5d646d;
}
.input-css {
  margin-left: 10px;
  width: 100px;
}
.main1 {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: hidden;
  border-right: 1px solid #dfdbdb;
  z-index: 1;
}
.top-menu .el-menu-item {
  color: #dfdbdb;
}
.top-menu .is-active {
  color: #20a0ff;
}
.el-menu-item:hover {
  background-color: #d1dbe5;
}
.item {
  margin-top: 10px;
  margin-right: 50px;
}
.close {
  position: fixed;
  right: 0px;
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}
.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

/*.item {*/
  /*margin-right: 30px;*/
/*}*/

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.menu-list:not(.el-menu--collapse) {
  width: 140px;
  min-height: 200px;
}
.menu-list .el-menu-item {
  color: #ffffff;
}
.menu-list .is-active {
  color: #20a0ff;
}
.flexible {
  z-index: 11;
}
.flexible .el-radio-button__inner {
  background-color: transparent;
  border: 0px;
  color: #ffffff;
}
.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0;
}
.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
}
.search-box {
  width: 1300px;
  height: 700px;
}
.amap-demo {
  height: 300px;
}

.amap-demo {
  height: 300px;
}

.search-box {
  display: flex;
  left: 20px;
}

.amap-page-container {
  width: 1500px;
  height: 1000px;
  z-index: -10;
}
#panel {
  z-index: 0;
}
.h-w-100 {
  width: 100%;
  height: 100%;
}
.amap-overlays {
  z-index: 0;
}
.dg.a {
  margin-right: 45px;
}
.projectname {
  line-height: 80px;
}
.none {
  display: none;
}
.dg.main {
  margin-top: 70px;
  margin-right: 40px;
  z-index: 0;
}
/*#popup {*/
  /*margin-left: 140px;*/
/*}*/
.el-menu--horizontal > .el-menu-item.is-active {
  color: #20a0ff;
}
</style>
